<template>
  <div class="carModelListWrap withSpinBox h100">
    <div class="carModelListMain">
      <div class="h100" :gutter="[20, 25]" ref="carModelListRef">
          <s-table
            ref="table"
            class="h100"
            size="default"
            rowKey="id"
            :columns="columns"
            :data="loadPageData"
            :getPopupContainer="$commonFun.getPopupContainer"
            :scrollX="900"
          >
            <template slot="lastUpgradeSuccessTime" slot-scope="text">
                    <table-ellipsis :text="$commonFun.getDateMinuteStr(text)"></table-ellipsis>
                  </template>
             <span slot="action1" slot-scope="text,record">
             <auth-button
                 @click="handleClickListItem(record)"
                 :auth="statisticsPerms.vehicle.detail"
                 type="primary"
                 :ghost="true"
                 size="small"
                 >详情</auth-button>
            </span>
          </s-table>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import EmptyNotice from '@/components/EmptyNotice/Index.vue'
import AuthIcon from '@/components/AuthIcon'
import OperationMenu from '@/components/OperationMenu'
import { managePerms } from '@/config/permission/index'
import { statisticsPerms } from '@/config/permission/index'
import AuthText from '@/components/AuthText'


import { vehicleTbRowAction } from '../config/list'
import vehicleApi from '@/api/modules/system/vehicleMana'
import LockRiskJump from '@/views/components/CustomTag/lockRiskJump.vue'
import moment from 'moment'
import { STable } from '@/components'
import { axios } from '@/utils/request'
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import AuthButton from '@/components/AuthButton'

export default {
  components: {
    EmptyNotice,
    AuthIcon,
    OperationMenu,
    LockRiskJump,
    STable,
    AuthText,
    TableEllipsis,
    AuthButton
  },
  computed: {
    ...mapState({
      queryParams: (state) => state.vehicle.queryParams,
      vehicleData: (state) => state.vehicle.vehicleData,
      brandData: (state) => state.brand.brandData,
      activeVehicleId: (state) => state.vehicle.vehicleDetail ? state.vehicle.vehicleDetail.id : ''
    }),
    vehicleTypeObj () {
      return this.$store.getters.vehicleTypeObj()
    }
  },
  data () {
    return {
      managePerms,
      statisticsPerms,
      loadingPageData: false,
      pageSize: 10,
      listData: [],
      columns: [
        {
          title: 'VIN',
          align: 'center',
          dataIndex: 'vin',
          key: 'vin',
          width: 140
        },
        {
          title: '车辆类型',
          align: 'center',
          dataIndex: 'vehicleType',
          width: 140,
          customRender: text => {
            if(text==1){
              return '正式车辆'
            }
            else if(text==2){
              return '测试车辆'
            }
            else if(text==3){
              return '种子车辆'
            }else {
              return ''
            }
          }
        },
        {
          title: '车辆版本',
          align: 'center',
          dataIndex: 'vehicleVersion',
          key: 'vehicleVersion',
          width: 140
        },
         {
          title: 'DiLink版本',
          align: 'center',
          dataIndex: 'dilinkVersion',
          key: 'dilinkVersion',
          width: 140
        },
        {
          title: '品牌',
          align: 'center',
          dataIndex: 'company',
          key: 'company',
          width: 100
        },
        {
          title: '车系',
          align: 'center',
          dataIndex: 'brandName',
          key: 'brandName',
          width: 100
        },
        {
          title: '车型',
          align: 'center',
          dataIndex: 'modelName',
          key: 'modelName',
          width: 100
        },
        {
          title: '款型',
          align: 'center',
          dataIndex: 'trimLevel',
          key: 'trimLevel',
          width: 100
        },
        {
          title: '最近升级时间',
          align: 'center',
          dataIndex: 'lastUpgradeSuccessTime',
          special: true,
          scopedSlots: { customRender: 'lastUpgradeSuccessTime' },
          width: 160
        },
        {
          title: '操作',
          dataIndex: 'action1',
          align: 'center',
          scopedSlots: { customRender: 'action1' },
          width: 80,
          fixed: 'right'
        }
        ],
      totalData: 0,
      pageInfo: {
        total: 0,
        pageSize: 20,
        pageNo: 1
      },
      tbRowMenus: vehicleTbRowAction
    }
  },
  created () {
    this.$store.commit('resetVehicleQueryParams')
  },
  methods: {
    doAction (key, rowData) {
      if (this[key]) {
        this[key](rowData)
        return
      }
      this.$emit('clickbtn', { type: key, data: rowData })

    },
    // 获取操作每辆车的菜单
    getTbRowMenus (record) {
      // 是否可用
      const arr = this.tbRowMenus.filter(item => {
        return !(item.disabled && item.disabled(record))
      })
      // 获取按钮对应的权限
      const arr1 = arr.map(item => {
        const auth = item.getAuth ? item.getAuth(record) : ''
        const obj = {
          ...item,
          auth
        }
        delete obj.getAuth
        delete obj.disabled
        return obj
      })
      return arr1
    },
    loadPageData (parameter) {
      return this.$store.dispatch('getVehiclePageData', { ...this.queryParams, ...parameter });
      // this.listData = []
      // const params = {  ...this.queryParams,...this.pageInfo }
      // delete params.total
      // // this.loadingPageData = true
      // // return axios({
      // //   url: '/vehicle-service/vehicle/list',
      // //   method: 'get',
      // //   params: params
      // // })
      // this.$store.dispatch('getVehiclePageData', params).then(res => {
      //   const data = res.data
      //   this.listData = data
      //   console.log(this.listData);
      //
      //   this.pageInfo.total = res.totalCount
      //   this.pageInfo.pageNo = res.pageNo
      // }).catch(err => {
      //   console.log(err)
      // }).finally(() => {
      //   this.loadingPageData = false
      // })
    },
    // eslint-disable-next-line no-unused-vars
    changePageNo ({ page, pageSize }) {
      this.pageInfo.pageNo = page
      this.loadPageData()
    },
    // eslint-disable-next-line no-unused-vars
    showSizeChange ({ current, size }) {
      this.pageInfo.pageSize = size
      this.pageInfo.pageNo = 1
      this.loadPageData()
    },
    refreshData (isToFirstPage = true) {
      this.$refs.table.refresh(isToFirstPage)
      // if (isToFirstPage) {
      //   this.pageInfo.pageNo = 1
      // }
      // this.loadPageData()
    },
    getBrandData () {
      this.$store.dispatch('getBrandData')
    },
    handleClickListItem (row) {
      this.$emit('showdlistetail', row)
    },
    handleEdit (record) {
      this.$emit('clickedit', record.id)
    },
  }
}
</script>
<style scoped lang="less">
.carModelListWrap {
  display: flex;
  flex-direction: column;

  .carModelListMain {
    flex:1 0 0;
    overflow-y: auto;
    overflow-x: hidden;
    /*padding:0 16px;*/
    //min-width: 800px;
    .ant-row .ant-col{
      min-width: 250px;
    }
  }
  .carModelListFooter {
    flex:50px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
.carModelListItem {
  .carModelListItemTop {
    display: flex;
    justify-content: space-between;
  }
  .carModelListItemTopLeft {
    flex: 1 0 0;
    overflow: hidden;
    white-space: nowrap;
    margin-right: 10px;
    cursor: pointer;
  }
  .carIcon {
    font-size: 24px;
    margin-right: 10px;
  }
  h5 {
    margin-bottom: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    line-clamp: 1;
  }
  .carVinText {
    font-size: 1.4em;
    font-weight: bold;
    color: #5e5e5e;
    font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
  }
  .carModelListItemBottom {
    color: #cdcdcd;
    font-size: 0.8em;
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
  }
  .carDesc {
    font-size: 0.8em;
  }

  .divider {
    padding:0 3px;
  }
  .carModelListItemTopRight {
    .icon-bianji:hover {
      color: @primary-color;
      font-weight: bold;
    }
  }
}

</style>
